<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="getData" />
    <table-index :table="table" @loadData="getData">
      <template #content="{ record }">
        <p class="template-info">{{ record.content }}</p>
      </template>
    </table-index>
  </div>
</template>

<script setup lang="ts" name="BusinessNoticeRecordList">
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { getNoticeList } from '@/api/business/message'
  import { readMsg } from '@/api/common/index'
  import { onMounted, reactive, computed } from 'vue'
  import { usePageDict } from '@/hooks/useDict'
  import usePermissionStore from '@/store/modules/permission'
  import useUserStore from '@/store/modules/user'
  const userStore = useUserStore()
  const { resourcePermission } = usePermissionStore()

  import useInfoPermission from '@/hooks/useInfoPermission'
  const { isInfoPermission, toInfoDetail } = useInfoPermission()

  const dict = usePageDict('getNoticeEnums')

  // 接口参数（不包含page信息）
  const queryParam = reactive<any>({
    noticeType: 1,
  })

  const dateTimeAttrs = {
    type: 'i-range-picker',
    attrs: {
      showTime: true,
      timePickerProps: {
        defaultValue: ['00:00:00', '23:59:59'],
      },
    },
  }

  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '模板类型', prop: 'typeList', type: 'a-select', options: dict.templateTypeEnum, multiple: true },
      {
        label: '推送时间',
        prop: 'startTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.sendTimeStart = value[0]
          queryParam.sendTimeEnd = value[1]
        },
      },
    ]
  })

  // 初始化
  const init = () => {
    getData(queryParam)
  }
  // table 配置
  const table = useTable({
    columns: [
      { title: '模板类型', dataIndex: 'typeName', width: 110 },
      { title: '消息详情', slotName: 'content', width: 540 },
      { title: '推送时间', dataIndex: 'sendTime', width: 350 },
    ],
    operates: [
      {
        label: '查看详情',
        // 账户余额不足提醒和账户充值到账提醒不展示查看详情按钮
        show: (record: any) => {
          // 根据这条数据判断是否有权限展示按钮 before
          const permission = isInfoPermission(record)
          const is_permission = permission && resourcePermission.includes(permission)
          // end
          return is_permission && record.type !== 9 && record.type !== 10
        },
        method: (record: any) => {
          toInfoDetail(record)
        },
      },
    ],
  })
  // 获取列表数据，表格id已读处理
  const getData = (page: any) => {
    const fn = useFetchTableDataApi(table, queryParam, getNoticeList)
    fn(page).then((res: any) => {
      if (res.data?.length > 0) {
        let idList = res.data.map((i: any) => i.id)
        handleUpdateData(idList)
      }
    })
  }
  // 切换分页已读消息
  const handleUpdateData = (idList: any) => {
    readMsg({
      idList: idList,
    }).then(() => {
      userStore.updateUnreadMsgCount()
    })
  }
  onMounted(() => {
    init()
  })
</script>

<style lang="less" scoped>
  .template-info {
    white-space: pre-wrap;
  }
</style>
